<template>
	<view class="all">
		<view class="pic">
			<img class="pic_img" src="/static/img.png" alt="" />
			<svg color="#fff" width="30px" height="30px" viewBox="0 0 45 45" class="sc-kWtpeL liUqCn">

				<g fill="none" fill-rule="evenodd">
					<g transform="rotate(20 6.02 34.143)">
						<path
							d="M32.617 7.756h2.356V1.758C34.945.756 34.233.055 33.236.055h-5.97V2.41h5.346v5.346h.005zM2.355 27.326H0V33.324c.027 1.002.74 1.698 1.73 1.698h5.971v-2.355H2.355v-5.34zM32.617 32.672h-5.345v2.355h5.97c.991 0 1.703-.7 1.73-1.703v-5.998h-2.355v5.346zM0 1.753V7.75h2.355V2.41h5.346V.055h-5.97C.739.055.027.755 0 1.753"
							fill="currentColor"></path>
					</g>
				</g>
			</svg>
		</view>
		<view class="title">
			完成检查
		</view>
		<view class="body" v-if="finish ===false">
			<!-- <view class="body"> -->
			<h3 class="btitle" v-if="nopic===false">
				需要Seal of Authentication
			</h3>
			<h3 class="btitle" v-else>
				需要照片
			</h3>
			<view class="bfont" v-if="nopic===false">
				若要验证网上预购的产品，卖家必须将产品与Certilogo Seal of Authentication (SOA) 关联。请要求你的卖家生成 SOA。
			</view>
			<view class="bfont" v-else>
				请重新验证，并在需要照片时拍照，以便我们尽快提供回覆
			</view>
			<view class="btn" v-if="nopic===false">
				请卖家建立 SOA
				<img class="item_img" src="/static/right2.png" alt="" />
			</view>
			<view class="btn" v-if="nopic===false">
				了解更多
				<img class="item_img" src="/static/right2.png" alt="" />
			</view>
			<view class="btn" v-else @click="again">
				再次验证
				<img class="item_img" src="/static/right2.png" alt="" />
			</view>
		</view>
		<view class="font" v-if="nopic===false">
			我们的一位专家正在验证你的产品。你将通过电子邮件收到回复。这项流程通常会在24小时内完成。
		</view>
		<view class="bot" v-if="nopic===false">
			<view class="">

			</view>
			<view class="more" @click="toSearch">
				探索品牌
				<view class="line">

				</view>
				<view class="line2">

				</view>
				<view class="mright">
					<img class="item_img" src="/static/right3.png" alt="" />
				</view>
			</view>
		</view>
		<overall :back="false" color="#fff" :backgroupcolor='true' :main_logo="true" @login="login"></overall>
	</view>
</template>

<script>
	import overall from '../overall.vue'
	export default {
		components: {
			overall
		},
		data() {
			return {
				nopic: null,
				finish: true
			}
		},
		onLoad(option) {
			console.log(option?.nopic);
			if (option?.nopic == 'true') {
				this.finish = false
				this.nopic = true
			} else {
				this.nopic = false
			}
		},
		methods: {
			toSearch() {
				window.location.href = "https://discover.certilogo.com/"
			},
			again() {
				uni.navigateTo({
					url: '/pages/mail/photo'
				})
			}
		}
	}
</script>

<style>
	.mright {
		position: absolute;
		width: 25px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 15px;
		background-color: #f48b34;
		top: 18px;
		right: -34px;
	}

	.line {
		height: 2px;
		width: 60px;
		background-color: #fff;
		position: absolute;
		left: 22px;
		top: 30px;
		z-index: 10;
	}

	.line2 {
		height: 2px;
		width: 13px;
		background-color: #01874f;
		position: absolute;
		left: 73px;
		top: 30px;
		z-index: 10;
	}

	.more {
		color: #fff;
		font-weight: bold;
		margin-right: 40px;
		position: relative;
	}

	.bot {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.font {
		margin: 20px auto;
		color: #fff;
		text-align: center;
	}

	.item_img {
		width: 19px;
		height: 19px;
		color: #000;
		margin-left: 10px;
	}

	.all {
		padding: 15% 5% 5% 5%;
		background-image: linear-gradient(rgb(0, 181, 226), rgb(125, 85, 199));
		height: 90.5vh;

	}

	.pic_img {
		width: 28px;
		height: 28px;
		position: absolute;
		transform: rotate(20deg) scale(.6) translate(5px, -30px);
	}

	.pic {
		width: 20%;
	}

	.liUqCn {
		transform: scale(1.5) translate(5px, -11px);
	}

	.title {
		margin: 0 auto;
		text-align: center;
		font-size: 25px;
		font-weight: bold;
		color: #fff;
		letter-spacing: 2px;
	}

	.body {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		height: 85%;
		margin-top: 15px;
		border-radius: 7px;
		box-shadow: #000 0px 0px 5px;
		align-items: center;
	}

	.btitle {
		font-size: 20px;
		margin-top: 20px;
	}

	.bfont {
		margin: 20px 0;
		width: 90%;
		text-align: center;
	}

	.btn {
		margin-bottom: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		width: 90%;
		height: 70px;
		background-color: #000;
	}
</style>